<template>
    <div class="line" ref="learnStep"></div>
</template>
<script>
import * as echarts from "echarts"
import lineOption from "./echarts/lineOption"
console.log(lineOption)
export default {
    data() {
        return {
            lineData: null
        }
    },
    methods: {
        fetchData() {
            //发起请求
            return new Promise((resolve, reject) => {
                fetch('https://chst.vip/data/rate.json')
                    .then(body => body.json())
                    .then(res => {
                        // console.log(res)
                        // this.lineData = res.data
                        resolve(res.data)
                    })
                    .catch(err => {
                        reject(err)
                    })
            })
        }
    },
    async mounted() {
        let learnChart = echarts.init(this.$refs.learnStep);
        //打开加载动画


        //窗口大小发生变化的时候,我们需要重新的让echarts自动使用窗口的宽度

        window.onresize = function(){
            learnChart.resize()
        }

        learnChart.showLoading()

        console.log(this.$refs.learnStep)
        //发起请求获取数据
        let lineData = await this.fetchData();
        //隐藏加载动画
        learnChart.hideLoading()
        // console.log(lineData)

        //由于后台返回来的数据不能够直接使用 所以需要处理

        //[{rate: 90, name: "css"}]

        //处理成两个数组 ['css'] [90]

        let xAxisData = []

        let seriesData = [];

        seriesData = lineData.map(item => {
            xAxisData.push(item.name);
            return item.rate
        })

        console.log(xAxisData)
        console.log(seriesData)
        //定义的option
        let option = {
            xAxis: {
                data: xAxisData
            },
            series: [
                {
                    data: seriesData,
                    type: 'line',
                    smooth: true,//圆滑
                }
            ]
        }



        console.log(Object.assign(lineOption, option))

        learnChart.setOption(Object.assign(lineOption, option))
    }
}
</script>
<style>
.line {
    height: 300px
}
</style>